<template>
  <div>
    <el-row>
      <el-col>
        <h1><i class="el-icon-eleme" style="color: red; "></i>{{sysname}}</h1>
      </el-col>
    </el-row>
  <el-row>
    <el-button type="primary" @click="toadd()" icon="el-icon-search" width="100">新增</el-button>
  </el-row>
  <el-row>
    <el-col>
    <el-table :data="list">
      <el-table-column prop="title" label = "标题" ></el-table-column>
       <el-table-column prop="sellPoint" label="卖点" ></el-table-column>
        <el-table-column prop="price" label="价格" ></el-table-column>
         <el-table-column prop="note" label="详情" ></el-table-column>

         <el-table-column label="[操作]">
           <el-button type="success" @click="toupdate()" icon="el-icon-check">修改</el-button>
           <el-button type="danger" @click="del()" icon="el-icon-delete">删除</el-button>
         </el-table-column>
    </el-table>

    </el-col>
    </el-row>
  </div>

</template>

<script>
  export default{
  name:'item',
  data(){
      return{
       sysname:"京淘电商平台",
       list:[
         {
           title:'javascript入门宝典',
           sellPoint:'这本书很好',
           price:99,
           note:'这本书是主流的作家写的',

         },
         {
           title:'java是全球第一大语言',
           sellPoint:'java从业人员最多',
           price:1888,
           note:'学java'
         }
       ]

      }
    },
  methods:{
      toadd:function(){
        console.log("转向新增方法")
      },
      toupdate:function(){
        console.log("转向修改方法")
      },
      del:function(){
        console.log("执行删除方法")
      }
    }

  }
</script>

<style>
</style>
